<template>
    <div class = "MusicControl">
        <slider
            class = "music-progress"
            min="0"
            :max="countTime"
            :value = "currentTime"
            block-size = "12"
            backgroundColor = "#E6E6E6"
            activeColor = "#D2AA76"
            block-color = "#D2AA76"
            @change = "progressChange"
        />
        <div class = "music-control">
            <span class = "iconfont icon-houtui"></span>
            <span v-if = "isPlay" class = "iconfont icon-zanting center" @click = "chengeAudioState(0)"></span>
            <span v-else class = "iconfont icon-kaishi1 center" @click = "chengeAudioState(1)"></span>
            <span class = "iconfont icon-qianjin"></span>
        </div>
    </div>
</template>
<script>

export default {
    data(){
        return {
            musicEngine: null,
            countTime: 0,
            currentTime: 0,
            isPlay: false
        }
    },
    props: ["url"],
    computed: {
        encodingURL(){
            return encodeURI(this.url);
        }
    },
    onLoad(){
        //创建音频上下文对象
        this.musicEngine = wx.createInnerAudioContext();
        this.musicEngine.src = this.encodingURL;
        this.musicEngine.autoplay = true;
        
        //实时更新进度
        this.musicEngine.onTimeUpdate(()=>{
            //获取音频时长
            if(this.countTime == 0){
                this.countTime = this.musicEngine.duration;
                this.$emit("updateTime",this.musicEngine.duration);
                this.musicEngine.pause();
            }
            console.log(this.musicEngine.currentTime);
            this.currentTime = this.musicEngine.currentTime;
        })

    },
    methods: {
        progressChange(e){
            let value = e.mp.detail.value;
            this.musicEngine.startTime = value;
            this.musicEngine.seek(value);
            // this.musicEngine.seek(value);
            console.log(e.mp.detail.value)
        },
        //改变播放状态
        chengeAudioState(state){
            if(state){
                this.isPlay = true;
                this.musicEngine.play();
            }else{
                this.isPlay = false;
                this.musicEngine.pause();
            }
        }
    }
}
</script>
<style lang = "scss" scoped>
    .MusicControl{
        margin: auto;
        padding-top: 66rpx;
        width: 612rpx;
    }
    .music-progress{
        margin: 0;
        padding: 0;
        
    }
    .music-control{
        display: flex;
        justify-content: space-around;
        align-items: center;
        padding-top: 50rpx;
        font-size: 50rpx;
        color: #B3B3B3;
        span{
            display: inline-block;
        }
    }
    .iconfont.center{
        font-size: 80rpx;
        color: #D2AA76;
    }
</style>
